<template>
<!-- 行为兴趣 -->
  <div>
    <div>
      <span style="font-weight: 600;font-size:16px;">行为：</span>
      <div class="actionContent">

        在 
        <a-select
          v-model="action_scene"
          mode="multiple"
          style="width:280px"
          placeholder="所有行为场所"
          option-label-prop="label"
          :maxTagCount="1"
          @change="selectChange('action_scene')"
        >
          <a-select-option
            v-for="(item,index) in this.$global.actionScene"
            :key="index"
            :value="item.value"
            :label="item.label"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
        中，
        选择用户 
        <a-select
          v-model="action.action_days"
          style="width:150px"
          option-label-prop="label"
          @change="selectChange('action_days')"
        >
          <a-select-option
            v-for="(item,index) in actionDays"
            :key="index"
            :value="item.value"
            :label="item.label"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
        内发生的行为：
        
        <div class="treeClass">
          <div class="actionTreeClass">
            <!-- expanded-keys:展开指定节点 -->
            <a-tree
              v-model="checkedKeys"
              :replaceFields="{ key:'id',title:'name',children:'children'}"
              :tree-data="actionTreeData"

              checkable
              :expanded-keys="actionKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              @expand="onExpand"
              @check="onCheck"
              @select="onSelect"
            />
          </div>
          <div class="actionKeys">
            <a-table
              :data-source="actionSource"
              :columns="actionColumns"
              :pagination="false"
              childrenColumnName="no"
              height="100%"
              rowKey='id'
            >
            </a-table>
            <span class="actionKeysClose" @click="closeKeys('action')">清空</span>
          </div>

        </div>
      </div>
    </div>
    <div>
      <span style="font-weight: 600;font-size:16px;">兴趣：</span>
      <div class="interestContent">
        <div class="interestTreeClass">
          <a-tree
            v-model="interestcheckedKeys"
            :replaceFields="{ key:'id',title:'name',children:'children'}"
            :tree-data="interestTreeData"
            checkable
            :expanded-keys="interestKeys"
            :auto-expand-parent="interestautoExpandParent"
            :selected-keys="interestselectedKeys"
            @expand="interestExpand"
            @check="interestCheck"
            @select="interestSelect"
          />
        </div>
        <div class="interestKeys">
          <a-table
            :data-source="interestSource"
            :columns="interestColumns"
            :pagination="false"
            childrenColumnName="no"
            height="100%"
            rowKey='id'
          >
          </a-table>
          <span class="actionKeysClose" @click="closeKeys('interest')">清空</span>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { getAccountListGet } from "@/api/adv/account";
import { getActionCategory,getInterestCategory } from "@/api/headlinesApi/index";

const actionDays = [
  { value: '7',label: '7天' },
  { value: '15',label: '15天' },
  { value: '30',label: '30天' },
  { value: '60',label: '60天' },
  { value: '90',label: '90天' },
  { value: '180',label: '180天' },
  { value: '365',label: '365天' }
]

export default {
  props:{
    interestValue:{
      type:Array
    },
    categoryType:{
      type:String
    }
  },
  data(){
    return {
      // table
      actionSource:[],
      actionColumns:[
        {
          title: '行为',
          dataIndex: 'name',
        },
        {
          title: '人数',
          dataIndex: 'num',
        }
      ],
      interestSource:[],
      interestColumns:[
        {
          title: '兴趣',
          dataIndex: 'name',
        },
        {
          title: '人数',
          dataIndex: 'num',
        },
      ],
      // 筛选行为受众人数
      action_scene:[],
      action:{
        action_scene:[],
        action_days:'30',
        advertiser_id:''
      },
      actionDays,
      // 行为数据
      actionKeys: [],
      autoExpandParent: false,  //自动展开父节点
      checkedKeys: [],  //tree绑定值(选中)
      selectedKeys: [], // 选中树节点
      actionTreeData:[],  //树形绑定数据
      // 兴趣数据
      interestKeys: [],
      interestautoExpandParent: false,  //自动展开父节点
      interestcheckedKeys: [],  //tree绑定值(选中)
      interestselectedKeys: [], // 选中树节点
      interestTreeData:[],  //树形绑定数据
    }
  },
  
  watch: {
    // 监听 行为 选中数据
    checkedKeys(val) {
      this.$emit('setFields',val,'action_categories')
      },
    // 监听 兴趣 选中数据
    interestcheckedKeys(val){
      this.$emit('setFields',val,'interest_categories')
    },
    actionTreeData(val){
      this.actionSource = []
      this.childrenData(val)
    }
  },
  created(){
    this.getAccount()
  },
  methods:{
    async getAccount(){
      await getAccountListGet().then((res)=>{
        if(res.code === 'SUCCESS'){
          this.dataProcess(res.data[0].account_id)
          this.getInterestData(res.data[0].account_id)
        }else {
          this.getAccount()
        }
      })
    },
    dataProcess(account_id){
      this.action.advertiser_id = account_id
      if(this.action_scene.length == 0){
        this.action.action_scene = ['E-COMMERCE','NEWS','APP','SEARCH']
      }else{
        this.action.action_scene = this.action_scene
      }
      this.getActionData(account_id,this.action)
    },
    // 行为数据
    getActionData(account_id,param){
      getActionCategory(account_id,param).then((res)=>{
        this.actionTreeData = res.data
      })
    },
    // 兴趣数据
    getInterestData(account_id){
      let quest = { advertiser_id:account_id }
      getInterestCategory(account_id,quest).then((res)=>{
        this.interestTreeData = res.data
      })
    },
    // 清空
    closeKeys(type){
      if( type === 'action' ){
        this.checkedKeys = []
        this.actionSource = []
        this.childrenData(this.actionTreeData)
      }else if( type === 'interest' ){
        this.interestcheckedKeys = []
        this.interestSource = []
        this.interestChildrenData(this.interestTreeData)
      }
    },
    childrenData(actionTreeData){
      actionTreeData.forEach( ele => {
        if(ele.children){
          this.childrenData(ele.children)
        }
        if( this.checkedKeys.indexOf(ele.id) !== -1 ){
          this.actionSource.unshift(ele)
        }
      });
    },
    interestChildrenData(interestTreeData){  //
      interestTreeData.forEach( ele => {
        if(ele.children){
          this.interestChildrenData(ele.children)
        }
        if( this.interestcheckedKeys.indexOf(ele.id) !== -1 ){
          this.interestSource.unshift(ele)
        }
      });
    },

    // 行为
    onCheck(val,node){
      this.actionSource = []
      this.childrenData(this.actionTreeData)
    },
    onExpand(actionKeys) {
      this.actionKeys = actionKeys;
      this.autoExpandParent = false;
    },
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys;
    },
    // 兴趣
    interestCheck(val,node){
      this.interestSource = []
      this.interestChildrenData(this.interestTreeData)
    },
    interestExpand(interestKeys) {
      this.interestKeys = interestKeys;
      this.interestautoExpandParent = false;
    },
    interestSelect(selectedKeys, info) {
      this.interestselectedKeys = selectedKeys;
    },


    // select筛选框
    selectChange(value){
      if(value === 'action_scene'){
        if(this.action_scene.length !== 0){
          this.action.action_scene = this.action_scene
        }else {
          this.action.action_scene = ['E-COMMERCE','NEWS','APP','SEARCH']
        }
      }
      this.getActionData(this.action.advertiser_id,this.action)
    },
  }
}
</script>

<style lang="less" scoped>
  .actionContent{
    .treeClass{
      margin-left: 20px;
      display: flex;
      width: 100%;
      height: 300px;
      border: 1px solid #C1C1C1;
      .actionTreeClass{
        overflow-y: auto;
        width: 50%;
        height: 300px;
        // border: 1px solid blue;
      }
      .actionKeys{
        overflow-y: auto;
        width: 50%;
        height: 300px;
        // border: 1px solid blue;
        position: relative;
      }
    }
  }
  // 兴趣
  .interestContent{
    margin-left: 20px;
    display: flex;
    width: 100%;
    height: 300px;
    border: 1px solid #C1C1C1;
    .interestTreeClass{
      overflow-y: auto;
      width: 50%;
      height: 300px;
      // border: 1px solid blue;
    }
    .interestKeys{
      position: relative;
      overflow-y: auto;
      width: 50%;
      height: 300px;
      // border: 1px solid blue;
    }
  }
  // 清空
  .actionKeysClose{
    position: absolute;
    top: 5px;
    right: 10px;
  }
  .actionKeysClose:hover{
    color: royalblue;
    cursor: pointer;
  }
</style>